import { lazy } from 'react'
import Basic from '../layouts/basic'
const Home = lazy(() => import('../pages/home'))
const Cart = lazy(() => import('../pages/cart'))
const Mine = lazy(() => import('../pages/mine'))
const Hook = lazy(() => import('../pages/hook'))
const BsDemo = lazy(() => import('../pages/demo-bs'))
const News = lazy(() => import('../pages/news'))
const Login = lazy(() => import('../pages/login'))
const LoadImg = lazy(() => import('../pages/loadimg'))
const Detail = lazy(() => import('../pages/detail'))

export const routes = [
  {
    path: '/login',
    element: <Login />,
  },
  {
    path: '/detail/:detailId',
    element: <Detail />,
  },
  {
    path: '/',
    element: <Basic />,
    children: [
      {
        index: true,
        element: <Home />,
      },
      {
        path: 'img',
        element: <LoadImg />,
      },
      {
        path: 'news',
        element: <News />,
      },
      {
        path: 'demo',
        element: <BsDemo />,
      },
      {
        path: 'cart',
        element: <Cart />,
      },
      {
        path: 'mine',
        element: <Mine />,
      },
      {
        path: 'hook',
        element: <Hook />,
      },
    ],
  },
]
